<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style type="text/css">
.plsi{
	text-align: left;
	width: 400px;
	

}
	
		body{
		width: 2000px;
		height: 1345px;
		background: url("55.png");
		background-repeat: no-repeat;
	}
		
	#covers1{
		background: #33CC00;
		position:absolute;
		display: none;
		top:0px;
		left:0px;
		filter:alpha(opacity=60);
		opacity: 0.6!important;
		z-index: 2;
	}
	#logindiv{
		
		position: relative;
		margin: 50px auto;
		display: none;
		padding: 0px;
		height: 300px;
		width: 300px;
		z-index: 20;
	}
</style>
</head>

<script type="text/javascript">
function $(obj){
	return document.getElementById(obj);
}
function pcity(){
	var arr =new Array(2);
	arr["河南"]=["郑州","开封","洛阳","安阳"];
	arr["河北"]=["石家庄","廊坊","衡水","邯郸"];
	var province=$("province").value;
	$("city").options.length =0;
	for (var index in arr[province]) {
		var opt=new Option(arr[province][index],arr[province][index]);
		document.getElementById("city").options.add(opt);

	}

var arr2=new Array();
	arr2["郑州"]=["金水区","中原区","垃圾堆","惠及区"];
	arr2["开封"]=["郑州","开封","洛阳","安阳"];
	arr2["洛阳"]=["郑州","开封","洛阳","安阳"];
	arr2["安阳"]=["郑州","开封","洛阳","安阳"];
	arr2["石家庄"]=["郑州","开封","洛阳","安阳"];
	arr2["廊坊"]=["郑州","开封","洛阳","安阳"];
	arr2["衡水"]=["郑州","开封","洛阳","安阳"];
	arr2["邯郸"]=["郑州","开封","洛阳","安阳"];
	var city=$("city").value;
	$("area").options.length=0;
	for(var index in arr2[city]){
		var opt =new Option(arr2[city][index],arr2[city][index]);
		document.getElementById("area").options.add(opt);
	}
}
function parea(){
	var arr2=new Array();
	arr2["郑州"]=["金水区","中原区","垃圾堆","惠及区"];
	arr2["开封"]=["郑州","开封","洛阳","安阳"];
	arr2["洛阳"]=["郑州","开封","洛阳","安阳"];
	arr2["安阳"]=["郑州","开封","洛阳","安阳"];
	arr2["石家庄"]=["郑州","开封","洛阳","安阳"];
	arr2["廊坊"]=["郑州","开封","洛阳","安阳"];
	arr2["衡水"]=["郑州","开封","洛阳","安阳"];
	arr2["邯郸"]=["郑州","开封","洛阳","安阳"];
	var city=$("city").value;
	$("area").options.length=0;
	for(var index in arr2[city]){
		var opt =new Option(arr2[city][index],arr2[city][index]);
		document.getElementById("area").options.add(opt);
	}
}
function on(sop){

	sop.style.background="#CCCCFF";
	sop.value;
	if(sop.value=="请输入用户名"){
		sop.value="";
	}



}
function one(){
	var uname=document.getElementById("uname").value;
	var reg=/^[a-zA-Z]\w{3,14}$/;
	if (reg.test(uname)!=true) {
       document.getElementById("cname").style.color="red";
		document.getElementById("cname").innerHTML="输入的用户名有误";
         return false;
	}
	else{
		document.getElementById("cname").style.display="none";
		document.getElementById("uname").style.background="";
		return true;
	}
}
function two(){

    var psw=document.getElementById('psw').value;
	var pswpsw=document.getElementById('pswpsw').value;
	var ypsw=/^\d{6}$/;
	if (ypsw.test(psw)!=true) {
		document.getElementById("cpsw").style.color="red";
		document.getElementById("cpsw").innerHTML="密码格式错误";
		return false;

	}
	 else if (psw!=pswpsw) {
		document.getElementById("cpswpsw").style.color="red";
		document.getElementById("cpswpsw").innerHTML="2次密码输入不一致";
		return false;
	}
	else{
		document.getElementById("cpswpsw").style.display="none";
		document.getElementById("cpsw").style.display="none";
		document.getElementById("pswpsw").style.background="";
		document.getElementById("psw").style.background="";
		return true;
	}
}
function three(){
	var mail=document.getElementById("mail").value;
	var reg=/^\w+((-\w+)|(\.\w+))*\@[a-zA-Z0-9]+((\.|-)[a-zA-Z0-9]+)*\.[a-zA-Z0-9]+$/;
	if(reg.test(mail)!=true){
		document.getElementById("cmail").style.color="red";
		document.getElementById("cmail").innerHTML="邮箱输入格式错误"
		return false;
	}
	else{
		document.getElementById("cmail").style.display="none";
		document.getElementById("mail").style.background="";
		return true;
	}
}
function four(){
	var phone=document.getElementById("phone").value;
	var reg=/^13\d{9}$/;
	if (reg.test(phone)!=true) {
		document.getElementById("cphone").style.color="red";
		document.getElementById("cphone").innerHTML="手机号输入格式有误";
return false;
	}
	else{
		document.getElementById("cphone").style.display="none";
		document.getElementById("phone").style.background="";
		return true;
	}

}
function five(){
	if(one()&&two()&&three()&&four())
	{

		if(confirm("确定提交注册信息吗？"))
		{
			return true;
		}
		else{
			alert("你取消了注册！");
			return false;
		}
	}
	else{
		alert('验证未通过！');
		return false;
	}
}
function iint(){
		var covers1=$("covers1");
		covers1.style.width=document.documentElement.scrollWidth+"px";
		covers1.style.height=document.documentElement.scrollHeight+"px";

	}
	function show(){
		$("covers1").style.display="block";
		$("logindiv").style.display="block";
	}
function hide(){
	$("covers1").style.display="none";
	$("logindiv").style.display="none";
}
</script>
<body onload="iint()">
<input type="button" id="login" value="注册" onclick="show()">
 <div id="covers1">  </div>
<div id="logindiv">
    <form id="start" action="" name="start" onsubmit="return five() ">
    <table class="plsi">
    	<tr>
    		<td>
    			<img src="im/top.jpg">
    		</td>
    	</tr>
    	<tr><td>用户名&nbsp;:<input type="text" id ="uname" value="请输入用户名" onblur="one()" onfocus="on(this)" ></td><td><span id="cname"></span></td></tr>
    		<tr><td>密&nbsp;&nbsp;码:<input type="password " id="psw"onblur="two()" onfocus="on(this)" ><span id="cpsw"></span></td></tr>
    			<tr><td>重复密码:<input type="password" id="pswpsw"onblur="two()" onfocus="on(this)" ><span id="cpswpsw"></span></td></tr>
    				<tr><td>邮&nbsp;&nbsp;箱:<input type="text" id="mail"onblur="three()" onfocus="on(this)" ><span id="cmail"></span></td></tr>
    		<tr><td>手机号码:<input type="text" id="phone"onblur="four()" onfocus="on(this)" ><span id="cphone"></span></td></tr>	

    <tr><td>区域:<select id="province" name="province" onchange="pcity()"><option value="请输入你所在的省">省</option><option  value="河南">河南</option>
	<option value="河北">河北</option>
	</select>
	&nbsp;&nbsp;所在城市<select id="city" name="city" onchange="parea()"><option value="请输入你所在的城市 ">城市</option></select>
	<select id="area" name="area" >
		<option value="你所在的区域">区域</option>
	</select>
	</td></tr>	
	<tr><td>  <a href="javascipt:void(0)" onclick="hide()"> 关闭</a><input type="submit" id="sub" value=" " style="width:150px ;height:38px; background:url(im/sumbit_btn.jpg)">
	 </td></tr>

    </table>
    </form>
    </div>
</body>
</html>